<template>
  <div class="app-container">
    <el-card class="join-form-card">
      <div slot="header">
        <span>会员入会申请</span>
      </div>
      
      <el-steps :active="active" finish-status="success" align-center style="margin-bottom: 30px;">
        <el-step title="填写基本信息"></el-step>
        <el-step title="上传证明材料"></el-step>
        <el-step title="确认提交"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      
      <!-- 步骤1：基本信息 -->
      <div v-if="active === 0">
        <el-form ref="basicForm" :model="joinForm" :rules="basicRules" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="joinForm.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="joinForm.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="joinForm.idCard" placeholder="请输入身份证号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  v-model="joinForm.birthday"
                  type="date"
                  placeholder="选择出生日期"
                  style="width: 100%;"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="joinForm.phone" placeholder="请输入手机号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="joinForm.email" placeholder="请输入电子邮箱"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工作单位" prop="company">
                <el-input v-model="joinForm.company" placeholder="请输入工作单位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属部门" prop="department">
                <el-input v-model="joinForm.department" placeholder="请输入所属部门"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职务" prop="position">
                <el-input v-model="joinForm.position" placeholder="请输入职务"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入职时间" prop="entryDate">
                <el-date-picker
                  v-model="joinForm.entryDate"
                  type="date"
                  placeholder="选择入职时间"
                  style="width: 100%;"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="通讯地址" prop="address">
            <el-input v-model="joinForm.address" placeholder="请输入通讯地址"></el-input>
          </el-form-item>
          
          <el-form-item label="入会原因" prop="reason">
            <el-input
              type="textarea"
              v-model="joinForm.reason"
              :rows="3"
              placeholder="请简述入会原因"
            ></el-input>
          </el-form-item>
        </el-form>
        
        <div class="step-buttons">
          <el-button type="primary" @click="nextStep('basicForm')">下一步</el-button>
        </div>
      </div>
      
      <!-- 步骤2：上传证明材料 -->
      <div v-else-if="active === 1">
        <el-form ref="uploadForm" :model="joinForm" :rules="uploadRules" label-width="100px">
          <el-form-item label="身份证正面" prop="idCardFront">
            <el-upload
              class="upload-container"
              action="#"
              :http-request="uploadIdCardFront"
              :show-file-list="false"
              :before-upload="beforeUpload"
            >
              <img v-if="joinForm.idCardFront" :src="joinForm.idCardFront" class="upload-image">
              <i v-else class="el-icon-plus upload-icon"></i>
              <div class="upload-text">点击上传身份证正面照片</div>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="身份证反面" prop="idCardBack">
            <el-upload
              class="upload-container"
              action="#"
              :http-request="uploadIdCardBack"
              :show-file-list="false"
              :before-upload="beforeUpload"
            >
              <img v-if="joinForm.idCardBack" :src="joinForm.idCardBack" class="upload-image">
              <i v-else class="el-icon-plus upload-icon"></i>
              <div class="upload-text">点击上传身份证反面照片</div>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="工作证明" prop="workProof">
            <el-upload
              class="upload-container"
              action="#"
              :http-request="uploadWorkProof"
              :show-file-list="false"
              :before-upload="beforeUpload"
            >
              <img v-if="joinForm.workProof" :src="joinForm.workProof" class="upload-image">
              <i v-else class="el-icon-plus upload-icon"></i>
              <div class="upload-text">点击上传工作证明（如工牌、劳动合同等）</div>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="其他材料" prop="otherFiles">
            <el-upload
              class="upload-list"
              action="#"
              :http-request="uploadOtherFiles"
              :file-list="fileList"
              :on-remove="handleRemove"
              multiple
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">可上传其他相关证明材料，如推荐信等</div>
            </el-upload>
          </el-form-item>
        </el-form>
        
        <div class="step-buttons">
          <el-button @click="prevStep">上一步</el-button>
          <el-button type="primary" @click="nextStep('uploadForm')">下一步</el-button>
        </div>
      </div>
      
      <!-- 步骤3：确认提交 -->
      <div v-else-if="active === 2">
        <el-card shadow="never" class="confirm-card">
          <div slot="header">
            <span>申请信息确认</span>
          </div>
          
          <el-descriptions title="基本信息" :column="2" border>
            <el-descriptions-item label="姓名">{{ joinForm.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ joinForm.gender }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ joinForm.idCard }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ joinForm.birthday }}</el-descriptions-item>
            <el-descriptions-item label="手机号码">{{ joinForm.phone }}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{ joinForm.email }}</el-descriptions-item>
            <el-descriptions-item label="工作单位">{{ joinForm.company }}</el-descriptions-item>
            <el-descriptions-item label="所属部门">{{ joinForm.department }}</el-descriptions-item>
            <el-descriptions-item label="职务">{{ joinForm.position }}</el-descriptions-item>
            <el-descriptions-item label="入职时间">{{ joinForm.entryDate }}</el-descriptions-item>
            <el-descriptions-item label="通讯地址" :span="2">{{ joinForm.address }}</el-descriptions-item>
            <el-descriptions-item label="入会原因" :span="2">{{ joinForm.reason }}</el-descriptions-item>
          </el-descriptions>
          
          <div class="uploaded-files">
            <h4>已上传材料</h4>
            <el-row :gutter="20">
              <el-col :span="8" v-if="joinForm.idCardFront">
                <div class="file-item">
                  <img :src="joinForm.idCardFront" class="file-image">
                  <div class="file-name">身份证正面</div>
                </div>
              </el-col>
              <el-col :span="8" v-if="joinForm.idCardBack">
                <div class="file-item">
                  <img :src="joinForm.idCardBack" class="file-image">
                  <div class="file-name">身份证反面</div>
                </div>
              </el-col>
              <el-col :span="8" v-if="joinForm.workProof">
                <div class="file-item">
                  <img :src="joinForm.workProof" class="file-image">
                  <div class="file-name">工作证明</div>
                </div>
              </el-col>
            </el-row>
            
            <div v-if="fileList.length > 0" class="other-files">
              <h4>其他材料</h4>
              <el-tag v-for="(file, index) in fileList" :key="index" style="margin-right: 10px; margin-bottom: 10px;">
                {{ file.name }}
              </el-tag>
            </div>
          </div>
          
          <el-form :model="joinForm" label-width="100px" style="margin-top: 20px;">
            <el-form-item label="申请声明">
              <el-checkbox v-model="joinForm.agreement">
                我已阅读并同意《工会会员申请须知》，保证所提供的信息真实有效，如有虚假信息愿承担相应责任。
              </el-checkbox>
            </el-form-item>
          </el-form>
        </el-card>
        
        <div class="step-buttons">
          <el-button @click="prevStep">上一步</el-button>
          <el-button type="primary" @click="submitApplication" :disabled="!joinForm.agreement">提交申请</el-button>
        </div>
      </div>
      
      <!-- 步骤4：完成 -->
      <div v-else-if="active === 3" class="completion-step">
        <div class="completion-icon">
          <i class="el-icon-check"></i>
        </div>
        <h2 class="completion-title">申请提交成功</h2>
        <p class="completion-desc">您的会员入会申请已成功提交，申请编号：{{ applicationNo }}</p>
        <div class="completion-info">
          <p>我们将在5个工作日内审核您的申请，审核结果将通过短信通知您。</p>
          <p>您也可以通过"个人中心 > 我的申请"查询申请进度。</p>
        </div>
        <div class="step-buttons">
          <el-button type="primary" @click="goToHome">返回首页</el-button>
          <el-button @click="goToApplications">查看我的申请</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "MemberJoin",
  data() {
    // 身份证号验证
    const validateIdCard = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!reg.test(value)) {
        callback(new Error('请输入正确的身份证号码'));
      } else {
        callback();
      }
    };
    
    // 手机号验证
    const validatePhone = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号码'));
      } else {
        callback();
      }
    };
    
    return {
      active: 0, // 当前步骤
      joinForm: {
        name: '',
        gender: '男',
        idCard: '',
        birthday: '',
        phone: '',
        email: '',
        company: '',
        department: '',
        position: '',
        entryDate: '',
        address: '',
        reason: '',
        idCardFront: '',
        idCardBack: '',
        workProof: '',
        agreement: false
      },
      fileList: [],
      applicationNo: 'JH' + new Date().getTime(),
      // 基本信息验证规则
      basicRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { validator: validateIdCard, trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请输入工作单位', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入所属部门', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职务', trigger: 'blur' }
        ],
        entryDate: [
          { required: true, message: '请选择入职时间', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入通讯地址', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入入会原因', trigger: 'blur' },
          { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
        ]
      },
      // 上传材料验证规则
      uploadRules: {
        idCardFront: [
          { required: true, message: '请上传身份证正面照片', trigger: 'change' }
        ],
        idCardBack: [
          { required: true, message: '请上传身份证反面照片', trigger: 'change' }
        ],
        workProof: [
          { required: true, message: '请上传工作证明', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    // 下一步
    nextStep(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.active++;
        } else {
          this.$message.error('请完成必填项');
          return false;
        }
      });
    },
    
    // 上一步
    prevStep() {
      this.active--;
    },
    
    // 上传前检查
    beforeUpload(file) {
      const isImage = file.type.indexOf('image/') !== -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      
      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!');
        return false;
      }
      
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      
      return true;
    },
    
    // 上传身份证正面
    uploadIdCardFront(options) {
      this.simulateUpload(options.file).then(url => {
        this.joinForm.idCardFront = url;
      });
    },
    
    // 上传身份证反面
    uploadIdCardBack(options) {
      this.simulateUpload(options.file).then(url => {
        this.joinForm.idCardBack = url;
      });
    },
    
    // 上传工作证明
    uploadWorkProof(options) {
      this.simulateUpload(options.file).then(url => {
        this.joinForm.workProof = url;
      });
    },
    
    // 上传其他文件
    uploadOtherFiles(options) {
      this.simulateUpload(options.file).then(() => {
        this.fileList.push({
          name: options.file.name,
          url: URL.createObjectURL(options.file)
        });
      });
    },
    
    // 模拟上传过程
    simulateUpload(file) {
      return new Promise(resolve => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          setTimeout(() => {
            resolve(reader.result);
          }, 500);
        };
      });
    },
    
    // 移除文件
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    
    // 提交申请
    submitApplication() {
      if (!this.joinForm.agreement) {
        this.$message.warning('请阅读并同意申请声明');
        return;
      }
      
      // 这里应该调用后端接口提交申请，暂时使用模拟数据
      this.$message.success('申请提交成功');
      setTimeout(() => {
        this.active = 3;
      }, 1000);
    },
    
    // 返回首页
    goToHome() {
      this.$router.push('/');
    },
    
    // 查看我的申请
    goToApplications() {
      this.$message.info('功能开发中...');
    }
  }
};
</script>

<style lang="scss" scoped>
.join-form-card {
  margin-bottom: 20px;
}

.step-buttons {
  margin-top: 30px;
  text-align: center;
}

.upload-container {
  width: 220px;
  height: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  &:hover {
    border-color: #409EFF;
  }
  
  .upload-icon {
    font-size: 28px;
    color: #8c939d;
  }
  
  .upload-text {
    color: #606266;
    font-size: 14px;
    margin-top: 10px;
  }
  
  .upload-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.confirm-card {
  margin-bottom: 20px;
}

.uploaded-files {
  margin-top: 20px;
  
  h4 {
    margin-bottom: 15px;
    font-weight: normal;
    color: #606266;
  }
  
  .file-item {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 15px;
    
    .file-image {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 5px;
    }
    
    .file-name {
      text-align: center;
      color: #606266;
      font-size: 14px;
    }
  }
  
  .other-files {
    margin-top: 20px;
  }
}

.completion-step {
  text-align: center;
  padding: 30px 0;
  
  .completion-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-color: #f0f9eb;
    border-radius: 50%;
    margin: 0 auto 20px;
    
    i {
      font-size: 40px;
      color: #67c23a;
    }
  }
  
  .completion-title {
    font-size: 24px;
    color: #303133;
    margin-bottom: 15px;
  }
  
  .completion-desc {
    font-size: 16px;
    color: #606266;
    margin-bottom: 20px;
  }
  
  .completion-info {
    width: 80%;
    margin: 0 auto 30px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    text-align: left;
    
    p {
      margin: 5px 0;
      color: #606266;
    }
  }
}
</style> 